<script setup lang="ts">
import { useChannelStore } from '@/stores/channel';
import type { ArticleItem } from '@/types';
import axios from 'axios';
import { ref, watch } from 'vue';

const store = useChannelStore()

// const props = defineProps<{
//   channelId: number
// }>()
const list = ref<ArticleItem[]>([])
watch(() => store.channelId, async () => {
  const ref = await axios.get('http://geek.itheima.net/v1_0/articles', {
    params: {
      channel_id: store.channelId,
      timestamp: Date.now()
    }
  })
  console.log(ref.data)
  list.value = ref.data.data.results
}, { immediate: true })
</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="i in list" :key="i.art_id" @click="$router.push(`/detail/${i.art_id}`)">
      <p class="title">{{ i.title }}</p>
      <img class="img" v-for="j in i.cover.images" :src="j" alt="">

      <div class="info">
        <span>{{ i.aut_name }}</span>
        <span>{{ i.comm_count }}评论</span>
        <span>{{ i.pubdate }}</span>
      </div>
    </div>
  </div>
</template>
